<template>
	<!-- 订单确认页面 -->
	<view class="container" v-if="isloding">
		<view class="top">
			<view class="title">
				下单人资料
			</view>
			<view class="top_item">
				<image src="../../static/icon/shijian.png" mode=""></image>
				<view class="text" v-if="type==1">
					时间：{{date}} {{time}}
				</view>
				<picker mode="date" class="text" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input" v-if="type==2">时间：{{date}}</view>
				</picker>
				<picker mode="time" class="text" :value="time" start="00:01" end="23:59" @change="bindTimeChange">
					<view class="uni-input" v-if="type==2">{{time}}</view>
				</picker>
			</view>
			<view class="top_item">
				<image src="../../static/phne.png" mode=""></image>
				<view class="text">
					电话:
				</view>
				<input type="text" v-model="phone" placeholder="输入下单人电话号码" placeholder-class="placeS" @blur="changetel"/>
			</view>
		</view>
		<view class="mid">
			<view class="title">
				货物信息
			</view>
			<textarea v-model="remark" placeholder="请输入货物的注意事项，如易碎，易碎，易碎，易碎" placeholder-class="place" />
			<view class="mid_item">
				<image src="../../static/icon/shouhuoren.png" mode=""></image>
				<view class="mid_text">
					收货人姓名：
				</view>
				<input type="text" v-model="consignee" placeholder="请输入收货人姓名" placeholder-style="Inplace"/>
			</view>
			<view class="mid_item">
				<image src="../../static/phne.png" mode=""></image>
				<view class="mid_text">
					收货人电话：
				</view>
				<input type="text" v-model="consignee_phone" placeholder="请输入收货人电话" placeholder-style="Inplace" @blur="changetelSh"/>
			</view>
			<view class="mid_item" v-if="id==1||id==2">
				<image src="../../static/icon/gengche.png" mode=""></image>
				<view class="mid_text">
					跟车人数：
				</view>
				<input type="text" v-model="number" placeholder="请输入跟车人数(默认为1)" placeholder-style="Inplace"/>
			</view>
			<view class="mid_item" v-if="id==1||id==3">
				<image src="../../static/icon/shijian.png" mode=""></image>
				<view class="mid_text">
					预计时长:{{orderInfo.duration_at}}分钟
				</view>
			</view>
			<view class="mid_item" v-if="id==1||id==2">
				<image src="../../static/icon/licheng.png" mode=""></image>
				<view class="mid_text">
					预计里程：{{orderInfo.distance/1000}}公里
				</view>
			</view>
			<view class="mid_item" @tap="goSelection">
				<image src="../../static/icon/youhuijuan.png" mode=""></image>
				<view class="mid_text">
					优惠卷：{{Coupon}}
				</view>
				<image src="../../static/icon/you.png" class="you" mode=""></image>
			</view>
			<view class="payment">
				<view class="paymentez">
					<view class="title">
						请选择支付方式
					</view>
					<view class="itemBox">
						<view class="item" @tap="payOne">
							<image src="../../static/yue.png" mode=""></image>
							<view class="text">
								余额支付
							</view>
							<view class="quan">
								<view class="Selection" v-if="way==20">
									
								</view>
							</view>
						</view>
						<view class="item" @tap="payTwo">
							<image src="../../static/icon/wechat.png" mode=""></image>
							<view class="text">
								微信支付
							</view>
							<view class="quan">
								<view class="Selection" v-if="way==2">
									
								</view>
							</view>
						</view>
						<view class="item" @tap="payThree">
							<image src="../../static/alipay.png" mode=""></image>
							<view class="text">
								支付宝支付
							</view>
							<view class="quan">
								<view class="Selection" v-if="way==10">
									
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="payBtn">
						<view class="qx" @tap="cancellationPayment">
							取消支付
						</view>
						<view class="qx" @tap="confirmPayment">
							确认支付
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="money">
				预支付价格:<span>￥{{(prepayment).toFixed(2)}}</span>
			</view>
			<view class="btn" @tap="confirm">
				确认支付
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			})
			return {
				id:0,//判断种类
				type:0,//判断预约还是现在
				date: currentDate,//日期
				time: '12:01',
				Coupon:'请选择',
				token:'',
				prepayment:0,
				isloding:false,
				orderInfo:'',
				phone:'',//电话
				consignee:'',   //收货人姓名
				consignee_phone:'',//收货人电话
				number:1,//跟车人数
				remark:'',   //货物信息
				coupon_id:0,
				way:20  ,//支付方式    2:微信开放平台app支付 10:支付宝app支付 20:余额
				// paySelect:false//支付选择弹窗
			};
		},
		onLoad(e) {
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			this.orderInfo=e
			// console.log(e)
			this.id=e.id
			this.type=e.time
			this.token=e.token
			this.prepayment=parseFloat(e.prepayment)
			var now = new Date();
			var hour = now.getHours();//得到小时
			var minu = now.getMinutes();//得到分钟
			if (hour < 10) hour = "0" + hour;
			if (minu < 10) minu = "0" + minu;
			this.time=hour+":"+minu
			this.isloding=true
			uni.hideLoading()
		},
		onShow() {
			// console.log(this.Coupon)
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods:{
			payOne(){
				if(this.way==20){
					this.way=-1
				}else{
					this.way=20
				}
			},
			payTwo(){
				if(this.way==2){
					this.way=-1
				}else{
					this.way=2
				}
			},
			payThree(){
				if(this.way==10){
					this.way=-1
				}else{
					this.way=10
				}
			},
			cancellationPayment(){//取消支付
				uni.showToast({
					title: '取消支付',
					icon:'none',
					duration:2000
				});
			},
			confirm(){
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				if(this.orderInfo.time==1){
					this.subscribe_at=0
				}else{
					this.subscribe_at=this.date+' '+this.time
				}
				// console.log(this.subscribe_at)
				if(this.phone==''){
					uni.showToast({
						title: '电话号码不能为空',
						icon: 'none',
						duration: 2000
					});
				}else if(this.consignee==''){
					uni.showToast({
						title: '收货人姓名不能为空',
						icon: 'none',
						duration: 2000
					});
				}else if(this.consignee_phone==''){
					uni.showToast({
						title: '收货人电话不能为空',
						icon: 'none',
						duration: 2000
					});
				}else if(this.way==-1){
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none',
						duration: 2000
					});
				}else{
					uni.request({
						url: this.webUrl+'/user/job/submit',
						method: 'POST',
						header:{
							token:this.token
						},
						data: {
							start:this.orderInfo.start,
							start_lng:this.orderInfo.start_lng,
							start_lat:this.orderInfo.start_lat,
							end:this.orderInfo.end,
							end_lng:this.orderInfo.end_lng,
							end_lat:this.orderInfo.end_lat,
							type:this.orderInfo.id-1,
							specs_id:this.orderInfo.specs_id,
							cate:this.orderInfo.time-1,
							duration_at:this.orderInfo.duration_at*1,
							subscribe_at:this.subscribe_at,    //
							phone:this.phone,
							consignee:this.consignee,
							consignee_phone:this.consignee_phone,
							number:this.number,
							coupon_id:this.coupon_id,
							remark:this.remark,
							way:this.way
						},
						success: res => {
							console.log(res)
							if(res.data.code==0){
								var orderID=res.data.data.id
								var Payinfos=res.data.data.prepayment
								uni.hideLoading()
								// uni.showToast({
								// 	title: '订单创建成功',
								// 	icon:'none',
								// 	duration:2000
								// });
								uni.request({
									url: this.webUrl+'/user/pay/index',
									method: 'GET',
									data: {
										id:orderID
									},
									success: payInfo => {
										// console.log(payInfo)
										if(payInfo.data.code==0){  //调取支付
											if(this.way==20){
												uni.showToast({
													title: '下单成功',
													icon:'none',
													duration:2000
												});
												setTimeout(()=>{
													uni.navigateTo({
														url:'../orderDetails/orderDetails?id='+orderID+'&token='+this.token,
														// url: '../order/Order?id=0&token='+this.token,
														success: res => {},
														fail: () => {},
														complete: () => {}
													});
												},1500)
											}else if(this.way==2){
												if(Payinfos!=0){
													uni.requestPayment({
														provider: 'wxpay',
														orderInfo: payInfo.data.data, //微信、支付宝订单数据
														success: res => {
															console.log('success:' + JSON.stringify(res));
															setTimeout(()=>{
																uni.navigateTo({
																	url:'../orderDetails/orderDetails?id='+orderID+'&token='+this.token,
																	success: res => {},
																	fail: () => {},
																	complete: () => {}
																});
															},1500)
															uni.showToast({
																title: '下单成功',
																icon:'none',
																duration:2000
															});
														},
														fail: err => {
															console.log('fail:' + JSON.stringify(err));
															uni.showToast({
																title: '支付失败',
																icon:'none',
																duration:2000
															});
														}
													});
												}else{
													setTimeout(()=>{
														uni.navigateTo({
															url:'../orderDetails/orderDetails?id='+orderID+'&token='+this.token,
															success: res => {},
															fail: () => {},
															complete: () => {}
														});
													},1500)
													uni.showToast({
														title: '下单成功',
														icon:'none',
														duration:2000
													});
												}
											}else if(this.way==10){
												if(Payinfos!=0){
													uni.requestPayment({
														provider: 'alipay',
														orderInfo: payInfo.data.data, //微信、支付宝订单数据
														success: res => {
															console.log('success:' + JSON.stringify(res));
															setTimeout(()=>{
																uni.navigateTo({
																	url:'../orderDetails/orderDetails?id='+orderID+'&token='+this.token,
																	success: res => {},
																	fail: () => {},
																	complete: () => {}
																});
															},1500)
															uni.showToast({
																title: '下单成功',
																icon:'none',
																duration:2000
															});
														},
														fail: err => {
															console.log('fail:' + JSON.stringify(err));
															uni.showToast({
																title: '支付失败',
																icon:'none',
																duration:2000
															});
														}
													});
												}else{
													setTimeout(()=>{
														uni.navigateTo({
															url:'../orderDetails/orderDetails?id='+orderID+'&token='+this.token,
															success: res => {},
															fail: () => {},
															complete: () => {}
														});
													},1500)
													uni.showToast({
														title: '下单成功',
														icon:'none',
														duration:2000
													});
												}
											}
										}else if(payInfo.data.code==3){
											uni.showToast({
												title: payInfo.data.msg,
												icon:'none',
												duration:2000
											});
										}else{
											uni.showToast({
												title: '网络错误',
												icon:'none',
												duration:2000
											});
										}
									},
									fail: () => {
										uni.showToast({
											title: '网络错误,支付失败',
											icon:'none',
											duration:2000
										});
									},
									complete: () => {}
								});
							}else if(res.data.code==3){
								uni.showToast({
									title: res.data.msg,
									icon:'none',
									duration:2000
								});
							}else{
								uni.showToast({
									title: '网络错误',
									icon:'none',
									duration:2000
								});
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			bindDateChange: function(e) {
				this.date = e.target.value
				this.subscribe_at=this.date+' '+this.time
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
				this.subscribe_at=this.date+' '+this.time
			},
			 getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			goSelection(){
				uni.navigateTo({
					url: 'couponSelection/couponSelection?token='+this.token+'&prepayment='+this.prepayment,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			changetel() {
				if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						duration: 2000,
						icon: "none"
					});
					this.phone = "";
				}
			},
			changetelSh(){
				if (!/^1[3456789]\d{9}$/.test(this.consignee_phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						duration: 2000,
						icon: "none"
					});
					this.consignee_phone = "";
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background: #F2F2F2;
		.top{
			width: 100%;
			border-radius:0upx 0upx 30upx 30upx;
			background: #FFFFFF;
			.title{
				width:690upx;
				height:60upx;
				background:rgba(254,86,33,1);
				border-radius:0upx 30upx 30upx 0upx;
				font-size:32upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(255,254,254,1);
				line-height: 60upx;
				padding-left: 30upx;
			}
			.top_item{
				margin: 0 30upx;
				height: 94upx;
				border-bottom: 2upx solid #F5F5F5;
				line-height: 94upx;
				display: flex;
				align-items: center;
				image{
					width: 50upx;
					height: 50upx;
				}
				.text{
					margin-left: 25upx;
					font-size:28upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(52,52,52,1);
				}
				input{
					margin-left: 25upx;
					font-size:28upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(52,52,52,1);
					line-height: 94upx;
				}
			}
		}
		.mid{
			margin-top: 30upx;
			padding-bottom: 300upx;
			background:rgba(255,255,255,1);
			.title{
				width:690upx;
				height:60upx;
				background:rgba(254,86,33,1);
				border-radius:0upx 30upx 30upx 0upx;
				font-size:32upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(255,254,254,1);
				line-height: 60upx;
				padding-left: 30upx;
			}
			textarea{
				margin: 20upx 30upx;
				padding: 10upx;
				width:670upx;
				height:180upx;
				background:rgba(238,238,238,1);
				border-radius:20upx;
				font-size:24upx;
			}
			.place{
				font-size:24upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(153,153,153,1);
			}
			.mid_item{
				position: relative;
				display: flex;
				margin: 0 30upx;
				font-size:24upx;
				height: 80upx;
				border-top: 2upx solid #EDEDED;
				box-sizing: border-box;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(52,52,52,1);
				image{
					margin: 16upx 10upx 0 12upx;
					width: 50upx;
					height: 50upx;
				}
				.mid_text{
					margin-top: 30upx;
				}
				.pay{
					display: flex;
					justify-content: space-between;
					width: 70%;
					.mid_text{
						display: flex;
					}
					.quan{
						width: 32upx;
						height: 32upx;
						border: 2upx solid #000000;
						border-radius: 50%;
						.nei{
							width: 20upx;
							height: 20upx;
							background:rgba(254,86,33,1);
							border-radius: 50%;
							margin: 6upx auto;
						}
					}
				}
				input{
					font-size: 24upx;
					margin-top: 30upx;
					width: 400upx;
				}
				.Inplace{
					font-size: 24upx;
				}
				.you{
					margin: 0;
					position: absolute;
					right: 0upx;
					top: 32upx;
					// left: 412upx;
					width: 14upx;
					height: 20upx;
				}
			}
		}
		.bottom{
			position: fixed;
			text-align: center;
			bottom: 0;
			width: 100%;
			.money{
				height: 90upx;
				background:rgba(255,255,255,1);
				font-size:26upx;
				line-height: 90upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(40,40,40,1);
				span{
					color: #FF0202;
				}
			}
			.btn{
				height:98upx;
				background:rgba(254,86,33,1);
				box-shadow:0px 4px 9px 0px rgba(0, 0, 0, 0.13);
				font-size:50upx;
				font-family:SimHei;
				font-weight:400;
				color:rgba(255,255,255,1);
				line-height: 98upx;
			}
		}
		.payment{
			// position: fixed;  
			// top: 0;
			// left: 0;
			// bottom: 0;
			// right: 0;
			// background: rgba(0,0,0,.6);
			// display: flex;
			// flex-direction: column;
			// justify-content: center;
			// align-items: center;
			.paymentez{
				background: #FFFFFF;
				border-radius: 10upx;
				.title{
					// text-align: center;
					// padding: 30upx 0;
					font-size: 32upx;
				}
				.itemBox{
					.item{
						padding: 20upx 40upx;
						display: flex;
						// width: 400upx;
						align-items: center;
						position: relative;
						.text{
							font-size: 32upx;
							padding-left: 30upx;
						}
						.quan{
							width: 32upx;
							height: 32upx;
							border-radius: 50upx;
							border: 2upx solid #000000;
							position: absolute;
							right: 50upx;
							.Selection{
								width: 32upx;
								height: 32upx;
								border-radius: 50%;
								background: rgba(254,86,33,1);
								// margin: 6upx auto;
							}
						}
					}
					image{
						width: 50upx;
						height: 50upx;
					}
				}
				.payBtn{
					display: flex;
					margin-top: 30upx;
					padding: 0 20upx;
					margin-bottom: 20upx;
					justify-content: space-between;
					.qx{
						background: rgba(254,86,33,1);
						padding: 10upx;
						font-size: 32upx;
						color: #FFFFFF;
						border-radius: 10upx;
					}
				}
			}
		}
	}
</style>
